<template>
	<view class="m-formItem" :style="[style]">
		<view class="left">
			<template v-if="icon">
				<m-icon spa="0 29 0 0" wh="38" :color="iconColor" :type="icon"></m-icon>
			</template>
			<slot name="left"></slot>
		</view>
		<slot></slot>
		<view class="hint " v-if="message">
			<text>{{message}}</text> 
		</view>
	</view>
</template>
<script>
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		name: "m-formItem",
		mixins: [mixin],
		data() {
			return {
				// 错误提示语
				message: '',
				parentData: {
					// 提示文本的位置
					labelPosition: 'left',
					// 提示文本对齐方式
					labelAlign: 'left',
					// 提示文本的样式
					labelStyle: {},
					// 提示文本的宽度
					labelWidth: 45,
					// 错误提示方式
					errorType: 'message'
				}
			};
		},
		mounted() {
			this.init()
		},
		props: {
			icon: {
				type: String,
				default: ''
			},
			iconColor: {
				type: String,
				default: ''
			},
			// 绑定的值
			prop: {
				type: String,
				default: ''
			},
		},
		watch: {

		},
		computed: {

		},
		methods: {
			init() {
				this.getParentData('m-form');
			},
			// 移除u-form-item的校验结果
			clearValidate() {
				this.message = null
			},
			// 清空当前的组件的校验结果，并重置为初始值
			resetField() {
				// 找到原始值
				const value = uni.$m.getProperty(this.parent.originalModel, this.prop)
				// 将u-form的model的prop属性链还原原始值
				uni.$m.setProperty(this.parent.model, this.prop, value)
				// 移除校验结果
				this.message = null
			},
		},
	}
</script>

<style lang="scss">
	.hint {
		padding: 14rpx 0;
		font-size: 24rpx;
		color: #ff0000;
	}
	.left{
		padding-bottom: 15rpx;
	}
</style>